<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
<script src="../vue.js"></script>
</head>

<body>
<div id="app">

 <h1>{{isHot?"热啊":"冻啊"}}</h1>
 {{count}}
 <button @click="isHot=!ishot">change</button>
 </div>
 <script>
    Vue.config.productionTip=false;
    const vm =new Vue({
        el:"#app",
        data() {
            return {
                isHot:true,
                count:0,
            };
        },

    })
    /*
    在vue实例vm有一个$watch方法 也可以处理对vm实例上的属性进行监听
    参数1:被监听的属性
    参数2:回调
    参数3:配置对象 deep immediate
    
    */
   vm.$watch(
    "isHot",
    ()=>{
    console.log("监听有更新了");
},
{
    immediate:true,
}
   ); 
   vm.$watch(
    "count",
    () =>{
        console.log("监听有更新了1");
    },
    {
        immediate:true,
    }
   );

 </script>
 </script>
</body>

</html>